onMouseOver event occurs). For example, when the Our Story image appears on the page normally, it looks like this:
A rollover image is an image whose display changes when the pointer is "rolled" over it. You create a rollover image by attaching a behavior to an image.
A behavior is a combination of an event and an action. Events are situations that trigger actions. For example, an event called onClick can occur when the user clicks a button, or an event called onMouseOver can occur when the mouse pointer passes ("rolls") over an object. Actions are pieces of prewritten JavaScript code that perform specific tasks, such as opening a browser window, playing a sound, or stopping a Shockwave movie.
When attaching a behavior to a page element, you specify both an action and the event that triggers it. Dreamweaver offers several predefined actions that you can attach to page elements.
In this part of the tutorial, you'll apply Swap Image actions to the Our Story, Products, and This Week images so that the images are highlighted when the mouse passes over them (that is, when the onMouseOver event occurs). For example, when the Our Story image appears on the page normally, it looks like this:
After you've defined a behavior that includes the Swap Image action during the onMouseOver event, the Our Story image will look like this (the identical image with a different background color) when the mouse passes over it:
You'll continue working on the home page file to attach behaviors to the navigation images on your page. Then you'll preview the page in a browser to test the behaviors.
| 1 | In the Document window, click the Our Story image to select it. |
| 2 | Choose Window > Behaviors or press F8 to open the Behavior inspector, which lists all behaviors defined for a selected element.
|
| 3 | In the Events For pop-up menu, 3.0 and Later Browsers should already be displayed. If it is not, select it. |
| 4 | Add a new action to the list by clicking the plus (+) button and choosing Swap Image from the pop-up menu. |
The Swap Image dialog box appears. In the Images list, you'll see a list of all images on the page, with the Our Story image selected. This is the original image, which will be replaced with a highlight image when the mouse pointer passes over it.
|
|
| 5 | Click Browse to navigate to the Scaal_site/Images folder, select btn_ourstory_over.gif, and then click Select (Windows) or Choose (Macintosh) to select the image. |
This image replaces the original image during the onMouseOver event.
|
|
| 6 | Accept the default settings for preloading and restoring images. |
| The Preload Images option loads the swap image into the browser's cache as the page loads, so that when the user first moves the mouse pointer over the Our Story image, there is no noticeable pause before the highlight image appears. | |
The Restore Images onMouseOut option automatically assigns the Swap Image Restore action to the onMouseOut event for this image. This returns the image to its original state when the user moves the mouse pointer away from it. |
|
| 7 | Click OK to close the Swap Image dialog box and apply the changes you just made. |
The Behavior inspector now includes the events and actions you just defined for the image. The onMouseOver event appears with the Swap Image action; above it is the onMouseOut event with the Swap Image Restore action. (This behavior was defined when you accepted the default options in the Swap Image dialog box.)
|
|
| 8 | Repeat steps 4 to 7 to attach Swap Image actions and onMouseOver events to the Products and This Week images: |
 |
Select the Products image. Then in the Swap Image dialog box, set the source of the Products swap image to btn_products_over.gif. |
|
Select the This Week image. Then in the Swap Image dialog box, set the source of the This Week swap image to image btn_thisweek_over.gif. |
| 9 | Close the Behavior inspector. |
| 10 | Press F12 to see your document in your default Web browser. |
| You do not have to save a document before you preview it. All browser-related functions work while you preview a document. | |
| 11 | Move the mouse pointer over the Our Story, Products, and This Week images to see how they change. |
| 12 | When you finish previewing the file, close the browser window. |
| 13 | Return to Dreamweaver and choose File > Save to save the changes you made to the home page. |
 |
Now, you'll start creating the files your home page will link to.